<template>
  <div class="wrapper">
    <div class="pageTurning pageTurningPre" @click="turnPagePre" style="margin-right: 20px;">
      <svg-icon icon-name="arrow" style="width: 23px; height: 23px"></svg-icon>
    </div>
    <div style="width: 96%;display: flex;justify-content: space-between;flex-direction: row;">
      <div class="right">
        <div style="display: flex;flex-direction: column;height: 32vh;">
          <div class=" title">省内重点企业招聘人数</div>
          <div class="righttop" style="height: 30vh"></div>
        </div>
        <div class="border" style="height: 25vh;width: 100%;">
          <div class="title">省内重点企业薪资福利</div>
          <div class="leftBottom" style="width: 99%;height:20vh;">
            <wordCloud />
          </div>
        </div>
        <div class="border" style="height: 38vh;">
          <div class="title">各城市的岗位数</div>
          <div class="leftHeader" style="height: 35vh">
          </div>
        </div>

      </div>

      <div style="display: flex;justify-content: space-between;flex-direction: column;width: 50%;">
        <div style="display: flex;flex-direction: row;
    justify-content: space-evenly;height: 30vh;
">
          <div class="border" style="height: 32vh;width:98%;">
            <div class="title">就业薪资与工作经验的关系</div>
            <div class="centertop" style="margin-left: 0px;height: 25vh;width:43vw;">
            </div>
          </div>
        </div>
        <div class="left">

          <div style="width: 110%;position: relative;" class="map-wrapper">
            <div id="mapDom" style="width: 100%; height: 70vh" class="map"></div>
            <div style="color: #fff;position: absolute;top: 20px;left: 20px;">GS京(2022)1061号</div>
          </div>
        </div>
      </div>

      <div class="center">
        <div class="border" style="height: 32vh;width: 100%;">
          <div class="title">前五专业毕业生就业单位性质与专业匹配程度</div>
          <div class="centerBottom" style="width: 100%;height:30vh;top: -3vh;"></div>
        </div>
        <div class="border" style="height: 25vh;width: 100%;">
          <div class="title">省内重点企业招聘要求</div>
          <div class="rightcenter" style="width: 100%;height:20vh;">
            <wordCloudtwo />
          </div>
        </div>
        <div class="border" style="height: 38vh;width: 100%;">
          <div class="title">省内学历与就业比例</div>
          <div class="rightbottom" style="height: 30vh"></div>
        </div>
      </div>
    </div>
  </div>
</template>



<script setup>
import * as echarts from "echarts";
import { onMounted, onBeforeUnmount } from "vue";
import { educationLevel, cityCounts, getProvinceData } from "@/api/visualizationData";
import wordCloud from "@/components/wordCloud.vue";
import wordCloudtwo from "@/components/provinceCloud.vue";
import { useRoute, useRouter } from "vue-router";
import geoJson from "@/assets/json/广东省.json";
import 'echarts-gl';
import "echarts-wordcloud";


const route = useRoute();
const router = useRouter();

let combinedChart = null;
let lineChart = null;
let barChart = null;
let circularDiagram = null;
let stackedAreaChart = null;

const handleResize = () => {
  combinedChart?.resize();
  lineChart?.resize();
  barChart?.resize();
  circularDiagram?.resize();
  stackedAreaChart?.resize();
};

const initStackedAreaChart = () => {
  stackedAreaChart = echarts.init(document.querySelector(".centerBottom"));
  const getUnit = async () => {
    const res = await getProvinceData();
    if (res.code === 200) {

      const categories = res.data[0].majorEmploymentMatch.map(item => item.major);

      const employmentTypes = [
        "国有企业",
        "民营企业",
        "外资企业",
        "事业单位",
        "自主创业"
      ];
      const data = res.data[0].majorEmploymentMatch.map(item => [
        parseFloat(item.stateOwned),
        parseFloat(item.privateEnterprise),
        parseFloat(item.foreignEnterprise),
        parseFloat(item.publicInstitution),
        parseFloat(item.selfEmployment)
      ]);;

      const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE']; // 定义颜色数组

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            let tooltipContent = params.map(param => {
              return `${param.seriesName}: ${param.value}%`;
            }).join('<br>');
            return tooltipContent;
          }
        },
        legend: {
          data: employmentTypes,
          bottom: 4,
          textStyle: {
            color: '#FFFFFF' // 图例字体颜色改为白色
          }
        },
        xAxis: {
          type: 'category',
          data: categories,
          name: '专业',
          nameTextStyle: {
            color: '#FFFFFF' // X轴名称字体颜色改为白色
          },
          axisLabel: {
            textStyle: {
              color: '#FFFFFF' // X轴标签字体颜色改为白色
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '百分比',
          nameTextStyle: {
            color: '#FFFFFF' // Y轴名称字体颜色改为白色
          },
          axisLabel: {
            textStyle: {
              color: '#FFFFFF' // Y轴标签字体颜色改为白色
            }
          }
        },
        series: employmentTypes.map((type, index) => ({
          name: type,
          type: 'line',
          stack: '总量',
          areaStyle: {
            color: colors[index % colors.length] // 为每个系列设置不同的颜色
          },
          data: data.map(item => item[index]),
          // label: {
          //   show: true,
          //   position: 'top',
          //   textStyle: {
          //     color: '#FFFFFF' // 数据标签字体颜色改为白色
          //   }
          // }
        }))
      };

      stackedAreaChart.setOption(option);
    }
  }
  getUnit();
};

const initCombinedChart = () => {
  combinedChart = echarts.init(document.querySelector(".righttop"));
  const getRecruits = async () => {
    const res = await getProvinceData();
    if (res.code === 200) {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            const enterprise = params[0].name;
            const recruitmentCount = params[0].data;
            const recruitmentTrend = params[1].data;
            return `${enterprise}<br>招聘人数：${recruitmentCount}人<br>招聘趋势：${recruitmentTrend}人`;
          }
        },
        legend: {
          data: ['招聘人数', '招聘趋势'],
          bottom: 10,
          textStyle: {
            color: "#fff"  // 设置图例文字颜色为白色
          }
        },
        grid: {
          left: '5%', // 增加左侧边距
          right: '3%', // 增加右侧边距
          top: '20%', // 增加上边边距
          bottom: '20%', // 增加下边边距
          containLabel: true // 确保标签不超出边界
        },
        xAxis: {
          name: '企业',
          type: 'category',
          data: res.data[0].enterpriseRecruitment.map(item => item.name),
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        yAxis: [
          {
            name: '招聘人数',
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            }
          },
          {
            name: '招聘趋势',
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '招聘人数',
            type: 'bar',
            data: res.data[0].enterpriseRecruitment.map(item => item.actual2023),
            barWidth: '40%',
            itemStyle: {
              color: '#F8DAA8'
            }
          },
          {
            name: '招聘趋势',
            type: 'line',
            yAxisIndex: 1,
            data: res.data[0].enterpriseRecruitment.map(item => item.plan2024),
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#D69955'
            },
            itemStyle: {
              color: '#EEEEEE'
            }
          }
        ]
      };

      combinedChart.setOption(option);
    }
  }
  getRecruits();
};

const initLineChart = () => {
  lineChart = echarts.init(document.querySelector(".centertop"));
  const getExperience = async () => {
    const res = await getProvinceData();
    if (res.code === 200) {
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return `${params[0].name}<br>平均薪资：${params[0].data}元`;
          }
        },
        grid: {
          left: '5%', // 增加左侧边距
          right: '10%', // 增加右侧边距
          top: '20%', // 增加上边边距
          bottom: '5%', // 增加下边边距
          containLabel: true // 确保标签不超出边界
        },
        xAxis: {
          name: '工作经验(年)',
          type: 'category',
          data: res.data[0].workExperienceSalary.map(item => item.workExperience),
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        yAxis: {
          name: '平均薪资（元）',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '平均薪资',
            type: 'line',
            data: res.data[0].workExperienceSalary.map(item => item.avgSalary),
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#F8DAA8'
            },
            itemStyle: {
              color: '#D69955'
            },
            emphasis: {
              itemStyle: {
                borderColor: '#FFFFFF',
                borderWidth: 2
              }
            }
          }
        ]
      };

      lineChart.setOption(option);
    }
  }
  getExperience();
};

const initBarChart = async () => {
  barChart = echarts.init(document.querySelector(".leftHeader"));

  try {
    const res = await cityCounts();
    if (res.code === 200) {
      const barChartOption = {
        tooltip: {},
        grid: {
          left: '5%', // 增加左侧边距
          right: '3%', // 增加右侧边距
          top: '10%', // 增加上边边距
          bottom: '20%', // 增加下边边距
          containLabel: true // 确保标签不超出边界
        },
        xAxis: {
          type: "category",
          data: res.data.cityList.slice(0, 10),
          axisLine: {
            lineStyle: {
              color: '#fff'  // x轴轴线颜色
            }
          },
          axisLabel: {
            color: '#fff'  // x轴标签颜色
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: '#fff'  // y轴轴线颜色
            }
          },
          axisLabel: {
            color: '#fff'  // y轴标签颜色
          }
        },
        series: [
          {
            data: res.data.countList.slice(0, 10),
            type: "bar",
            barWidth: "40%",
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  { offset: 0, color: 'rgba(214, 153, 85, 1)' },
                  { offset: 1, color: 'rgba(214, 153, 85, 0)' }
                ]
              }
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}",
              fontSize: 12,
              fontFamily: "Arial",
              fontWeight: "200",
              color: "#fff",
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgba(214, 153, 85, 1)' },
                    { offset: 1, color: 'rgba(214, 153, 85, 0)' }
                  ]
                }
              }
            }
          }
        ]
      };

      barChart.setOption(barChartOption);
    }
  } catch (error) {
    console.error("获取城市岗位数数据失败:", error);
  }
};

const initCircularDiagram = async () => {
  circularDiagram = echarts.init(document.querySelector(".rightbottom"));

  try {
    const res = await educationLevel();
    if (res.code === 200) {
      const circularDiagramOption = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "3%",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "学历与就业比例",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "56%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderWidth: 2
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{b}",
              color: "#fff"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30
            },
            data: res.data.map((item, index) => ({
              ...item,
              itemStyle: {
                color: ['#F0EBE3', '#F8DAA8', '#D69955'][index % 3]
              }
            }))
          }
        ]
      };

      circularDiagram.setOption(circularDiagramOption);
    }
  } catch (error) {
    console.error("获取学历与就业比例数据失败:", error);
  }
};

// 获取地图
async function initMap() {
  const mapDom = document.querySelector("#mapDom");
  const initMap = echarts.init(mapDom);

  // 假设 geoJson 是地图的 GeoJSON 数据
  echarts.registerMap("Guangdong Province", geoJson);

  // 调用接口获取数据
  const res = await getProvinceData();
  const provinceData = res.data[0].provinceEmployments;

  // 将接口返回的数据转换为 ECharts 的 series 数据格式
  const seriesData = provinceData.map(item => {
    return {
      name: item.city,
      value: item.avgSalary,
      employmentRate: item.employmentRate,
      avgSalary: item.avgSalary
    };
  });

  initMap.setOption({
    backgroundColor: "transparent",
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        const data = params.data || { name: params.name, employmentRate: '暂无数据', avgSalary: '暂无数据' };
        return `
          <div style="font-weight:bold;margin-bottom:5px;">${data.name}</div>
          <div>就业率: ${data.employmentRate}</div>
          <div>平均薪资: ${data.avgSalary}元</div>
        `;
      },
      backgroundColor: 'rgba(50,50,50,0.7)',
      borderColor: '#333',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    geo: {
      map: "Guangdong Province",
      roam: true,
      label: {
        show: true,
        color: '#333',
        fontSize: 12
      },
      itemStyle: {
        areaColor: '#F8DAA8',
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: '#D69955',
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          color: '#333',
          fontSize: 12
        }
      }
    },
    series: [
      {
        name: '就业数据',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: seriesData,
        symbolSize: function (val) {
          return Math.sqrt(val.value) * 0.8;
        },
        encode: {
          value: 2
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        },
        itemStyle: {
          color: '#A3470A'
        }
      },
      {
        name: '城市数据',
        type: 'map',
        geoIndex: 0,
        data: seriesData
      }
    ]
  });

  window.addEventListener("resize", () => {
    initMap.resize();
  });

  return initMap;
}





onMounted(() => {
  initCombinedChart();
  initLineChart();
  initBarChart();
  initCircularDiagram();
  initStackedAreaChart();
  initMap();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  combinedChart?.dispose();
  lineChart?.dispose();
  barChart?.dispose();
  circularDiagram?.dispose();
  stackedAreaChart?.dispose();
});


//跳转前一页
const turnPagePre = () => {
  router.push({
    path: "/home",
    // query: { id: noticeData.value.prevId },
  });
};
</script>

<style lang="scss" scoped>
// 标题公共样式
.title {
  width: 100%;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  color: #000;
  padding: 5px 0px 5px 10px;
  margin: 5px;
  display: inline-block;
  background: linear-gradient(to right,
      #F0EBE3,
      rgba(240, 235, 227, 0.8),
      rgba(240, 235, 227, 0.6),
      rgba(240, 235, 227, 0.4),
      rgba(240, 235, 227, 0.2),
      rgba(240, 235, 227, 0));
}

// .border {
//   background: linear-gradient(to left, #DCDCDC, #DCDCDC) left top no-repeat,
//     linear-gradient(to bottom, #DCDCDC, #DCDCDC) left top no-repeat,
//     linear-gradient(to left, #DCDCDC, #DCDCDC) right top no-repeat,
//     linear-gradient(to bottom, #DCDCDC, #DCDCDC) right top no-repeat,
//     linear-gradient(to left, #DCDCDC, #DCDCDC) left bottom no-repeat,
//     linear-gradient(to bottom, #DCDCDC, #DCDCDC) left bottom no-repeat,
//     linear-gradient(to left, #DCDCDC, #DCDCDC) right bottom no-repeat,
//     linear-gradient(to left, #DCDCDC, #DCDCDC) right bottom no-repeat;
//   background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px,
//     2px 20px, 20px 2px;
//   border: 1px solid #576F72;
//   position: relative;
// }
.border {
  background: rgba(255, 255, 255, 0.03);
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px;
  position: relative;
}

.wrapper {
  display: flex;
  overflow: hidden;
  min-height: 90vh;
  flex-direction: row;
  justify-content: space-between;

}

// .left {
//   width: 25%;
//   display: flex;
// }

.center {
  width: 25%;
  height: 87vh;
  // margin-left: 50px;
  // margin-right: 10px;
}

.right {
  width: 25%;
}

.pageTurning {
  margin-top: 36vh;
  width: 50px;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 初始阴影效果 */
}

.pageTurningNext:hover {
  transform: translateY(-5px) translateX(5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.pageTurningPre:hover {
  transform: translateY(-5px) translateX(-5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.flipArrow {
  transform: rotate(180deg);
  /* 立即旋转 180 度，不使用过渡动画 */
}

:deep(img) {
  width: 80%;
}
</style>